<template>
  <div class="finance">
    <header-bar title="财务内控管理系统">
    </header-bar>
    <group gutter="0" class="group">
    	<cell
    		 v-for="(cell, index) in cells"
        :key="index"
        :title="cell.title"
        is-link
        :link="cell.link"
    		>
    		<div class="title-wrapper" slot="title">
    			<span slot="title" class="title">
    				{{cell.title}}
    				<badge class="badge"></badge>
    			</span>
    		</div>
    		
    		<div slot="icon" class="icon-wrapper">
    			<icon :name="cell.icon" :scale="3"></icon>
    		</div>
    	</cell>  	
    </group>
		<transition name="slide">
			<router-view class=child-view></router-view>
		</transition>
  </div>
</template>

<script>
	import {Group, Cell, Badge} from 'vux'
  import HeaderBar from '@/components/HeaderBar'
  
  export default{
  	components:{
  		HeaderBar,
  		Cell,
  		Group,
  		Badge
  	},
  	data(){
  		return{
  			cells:[
  			  {
  			  	title:'一般预算审批',
  			  	icon:"dollar",
  			  	unReadCount:9,
  			  	link:{
  			  		name:'financeTodo'
  			  	}
  			  },
  			   {
  			  	title:'会议(事权)审批',
  			  	icon:"person_violet",
  			  	unReadCount:9,
  			  	link:{
  			  		name:'financeTodo'
  			  	}
  			  },
  			   {
  			  	title:'会议(财权)审批',
  			  	icon:"person_blue",
  			  	unReadCount:9,
  			  	link:{
  			  		name:'financeTodo'
  			  	}
  			  },
  			   {
  			  	title:'出差(事权)审批',
  			  	icon:"package_orange",
  			  	unReadCount:9,
  			  	link:{
  			  		name:'financeTodo'
  			  	}
  			  },
  			    {
  			  	title:'出差(财权)审批',
  			  	icon:"package_green",
  			  	unReadCount:9,
  			  	link:{
  			  		name:'financeTodo'
  			  	}
  			  },
  			    {
  			  	title:'培训(事权)审批',
  			  	icon:"document",
  			  	unReadCount:9,
  			  	link:{
  			  		name:'financeTodo'
  			  	}
  			  },
  			    {
  			  	title:'培训(财权)审批',
  			  	icon:"document",
  			  	unReadCount:9,
  			  	link:{
  			  		name:'financeTodo'
  			  	}
  			  },
  			
  			]
  		}
  	}
  }
</script>

<style lang="less" scoped>
   .group{
   	 .icon-wrapper{
   	 	 display: flex;
   	 	 align-items: center;
   	 }
   	 .title-wrapper{
   	 	display: flex;
   	 	 .title{
   	 	 	display: flex;
   	 	 	align-items: center;
   	 	 	position: relative;
   	 	 }
   	 	 .badge{
   	 	 	position: absolute;
   	 	 	top: -4px;
   	 	 	right: -8px;
   	 	 }
   	 }
   	}
   .child-view{
    position: fixed;
    top:0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .slide-enter-active, .slide-leave-active{
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
  }
  .slide-enter, .slide-leave-active{
    transform: translate3d(100%, 0, 0);
  }
   
</style>
